<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element.js"></script>
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/element.css" />
		<!-- iframe 基本通用样式 -->
		<link rel="stylesheet" type="text/css" href="../../css/common/iframe.css" />
		<!-- 阿里图标库 -->
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont/iconfont.css" />
	</head>
	<body>
		<div id="app">
			<div class="header">
				<i class="el-icon-postcard"></i>
				音乐管理/用户管理
			</div>
			<div class="main">
				<el-input placeholder="请输入用户名称" size="mini" v-model="name" style="width:150px"></el-input>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="getPageInfo">搜索</el-button>
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="openAddForm()">添加</el-button>
				<el-button type="danger" icon="el-icon-delete" size="mini" @click="deteleBatch">批量删除</el-button>
				<!-- 列表数据 -->
				<table class="listTable" border="1px">
					<tr>
						<th>
							<input type="checkbox" class="chexkbox" @change="allSelect" :checked="isAllSelect">
						</th>
						<th>昵称</th>
						<th>头像</th>
						<th>账号</th>
						<th>openId</th>
						<th>简介</th>
						<th width="200">基本操作</th>
					</tr>
					<tr v-for="item in list">
						<td>
							<input type="checkbox" style="width:20px" :value="item.id" :checked="isAllSelect"
								@change="ckSelect">
						</td>
						<td>{{item.nickName}}</td>
						<td><img :src="item.img" width="40px"></td>
						<td>{{item.phone}}</td>
						<td>{{item.openId}}</td>
						<td>{{item.remarks}}</td>
						<td style="width:200px">
							<!-- 修改 -->
							<span style="padding-right:8px">
								<el-button type="primary" icon="el-icon-edit" size="mini" @click="update(item.id)"
									circle>
								</el-button>
							</span>
							<!-- 删除 -->
							<span style="padding-right:8px">
								<el-button type="danger" icon="el-icon-delete" size="mini"
									@click="deleteById(item.id)" circle>
								</el-button>
							</span>
						</td>
					</tr>
				</table>
				<!-- 分页 -->
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="pageCurrent" :page-sizes="[4, 8]" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>

				<!-- 添加表单 -->
				<el-dialog id="el-dialog" title="添加用户" :visible.sync="addFormVisible" width="40%">
					<el-form class="addform" :model="addFrom" ref="addForm" label-position="right" label-width="70px"
						size="mini" :rules="rules">
						<el-form-item label="昵称" prop="nickName">
							<el-input v-model="addFrom.nickName" placeholder="请输入昵称" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="账号" prop="phone">
							<el-input v-model="addFrom.phone" placeholder="请输入账号" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input type="password" v-model="addFrom.password" placeholder="请输入密码" style="width:200px" show-password>
							</el-input>
						</el-form-item>
						<el-form-item label="图片">
							<el-upload ref="uploadImage" class="upload-demo"
								action="http://localhost:8080/user/uploadAddImg" :on-change="handleChangeAddImg"
								:auto-upload="false" :headers="headers" :data="uploadData"
								:on-success="uploadAddImgSuccess" :file-list="fileImgList" list-type="picture"
								:before-upload="beforeUploadAddImg" :show-file-list="showImgFileList">
								<el-button size="small" type="primary">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传 image 文件，且不超过30MB</div>
							</el-upload>
						</el-form-item>
						<el-form-item label="介绍">
							<el-input type="textarea" v-model="addFrom.remarks" placeholder="请输入备注" rows=3 style="width:300px">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button @click="addFormVisible = false" size="mini">取 消</el-button>
						<el-button type="primary" @click="addSubmit" size="mini">提 交</el-button>
					</div>
				</el-dialog>

				<!-- 修改表单 -->
				<el-dialog id="el-dialog" title="修改歌曲信息" :visible.sync="updateFormVisible" width="40%">
					<el-form class="updateform" :model="updateFrom" ref="updateForm" label-position="right"
						label-width="70px" size="mini" :rules="rules">
						<el-form-item label="昵称" prop="nickName">
							<el-input v-model="updateFrom.nickName" placeholder="请输入昵称" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="账号" prop="phone">
							<el-input v-model="updateFrom.phone" placeholder="请输入账号" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input type="password" v-model="updateFrom.password" placeholder="请输入密码" style="width:200px" show-password>
							</el-input>
						</el-form-item>
						<el-form-item label="图片">
							<el-upload ref="uploadImage" class="upload-demo"
								action="http://localhost:8080/user/uploadAddImg" :on-change="handleChangeAddImg"
								:auto-upload="false" :headers="headers" :data="uploadData"
								:on-success="uploadAddImgSuccess" :file-list="fileImgList" list-type="picture"
								:before-upload="beforeUploadAddImg" :show-file-list="showImgFileList">
								<el-button size="small" type="primary">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传 image 文件，且不超过30MB</div>
							</el-upload>
						</el-form-item>
						<el-form-item label="介绍">
							<el-input type="textarea" v-model="updateFrom.remarks" name="remarks"
								placeholder="请输入备注" rows=3 style="width:300px">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button @click="updateFormVisible = false" size="mini">取 消</el-button>
						<el-button type="primary" @click="updateSubmit(updateFrom.singerId)" size="mini">提 交</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				// 自定义手机号的验证规则
				const checkPhone = (rule, value, callback) => {
					if (value) {
						const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
						if (reg.test(value)) {
							callback()
						} else {
							return callback(new Error('请输入正确的电话'))
						}
					}
				};
				return {
					name: '', //查询关键字
					pageCurrent: 1, //当前页码
					pageSize: 8, //每页条数
					total: 0, //查询分页系总条数
					list: [], //歌手列表数据
					value: '0', //状态开关歌手
					addFormVisible: false, //添加歌手表单信息开关
					// 添加歌手表单信息
					addFrom: '',
					// 表单验证规则
					rules: {
						nickName: [{
							required: true,
							message: '歌手名不能为空',
							trigger: 'blur',
						}],
						phone: [{
							validator: checkPhone,
							trigger: 'blur'
						}]
					},
					updateFormVisible: false, //修改歌手表单信息开关
					// 修改歌手表单信息
					updateFrom: '',
					isAllSelect: false, //是否全选
					ids: [], //id 数组
					headers: {
						"token": localStorage.getItem('token')
					},
					singerVisible: false, //分配角色信息弹框按钮
					defaultProps: {
						children: 'children',
						label: 'label',
						// parentId: 'parentId'
					},
					// 上传歌手图片 文件列表
					fileImgList: [{
						name: '',
						url: ''
					}],
					showImgFileList: false,
					// 上传文件时要携带的参数
					uploadData: {
						userId: '' // 歌手id
					},
					allSongVisible: false, //歌手所有歌曲页面开关
					songList: '', // 歌手所有歌曲
					albumList: [{
						name: '',
						children: [{
							name: ''
						}],
					}], // 歌手所有专辑，既专辑下的所有歌曲
					allAlbumVisible: false, // 打开显示全部歌单以及歌单下的所有歌曲显示页面
					defaultProps: {
						children: 'children',
						label: 'name'
					}
				}
			},
			mounted() { // 生命周期函数
				this.getPageInfo()
			},
			methods: {
				//获取分页列表数据
				getPageInfo() {
					// 清空数据
					this.list = ''
					console.log(this.name)
					if (this.name.trim() != '') { //判断是否添加了搜素关键字
						//获取token
						let jwtToken = localStorage.getItem('token')
						axios({
							method: 'get',
							url: 'http://localhost:8080/user/page' + '/' + this.pageCurrent + '/' + this
								.pageSize + '/' + this.name,
							headers: {
								'token': jwtToken
							}
						}).then(res => {
							console.log(res.data)
							if (res.data.code == 200) { //成功
								let userPageInfo = res.data.data.userPage
								//1、将后端返回的列表数据赋值给 list
								this.list = userPageInfo.records
							
								//2、将后端分页信息也赋值给前端相应字段
								this.pageCurrent = userPageInfo.current
								this.pageSize = userPageInfo.size
								this.total = userPageInfo.total
							} else {
								this.$message.error("系统错误请联系管理员！")
							}
						})
					} else { //没有带关键字查询列表信息
						//获取token
						let jwtToken = localStorage.getItem('token')
						axios({
							method: 'get',
							url: 'http://localhost:8080/user/page' + '/' + this.pageCurrent + '/' + this
								.pageSize,
							headers: {
								'token': jwtToken
							}
						}).then(res => {
							console.log(res.data)
							if (res.data.code == 200) { //成功
								let userPageInfo = res.data.data.userPage
								//1、将后端返回的列表数据赋值给 list
								this.list = userPageInfo.records

								//2、将后端分页信息也赋值给前端相应字段
								this.pageCurrent = userPageInfo.current
								this.pageSize = userPageInfo.size
								this.total = userPageInfo.total
							} else {
								this.$message.error("系统错误请联系管理员！")
							}
						})
					}
				},
				//更新每页条数
				handleSizeChange(val) {
					// console.log(`每页 ${val} 条`);
					this.pageSize = val
					this.getPageInfo()
				},
				//更新当前页
				handleCurrentChange(val) {
					// console.log(`当前页: ${val}`);
					this.pageCurrent = val
					this.getPageInfo()
				},
				// 添加用户
				addSubmit() {
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'post',
						url: 'http://localhost:8080/user/add',
						headers: {
							'token': jwtToken
						},
						data: {
							'nickName': this.addFrom.nickName,
							'remarks': this.addFrom.remarks,
							'phone': this.addFrom.phone,
							'password': this.addFrom.password,
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 上传表单图片 参数 歌曲id
							this.uploadData.userId = res.data.data.userId
							if (this.fileImgList.length != 0) {
								// 上传表单图片
								this.$refs.uploadImage.submit();
							}
							// 刷新列表数据，重新求情列表数据
							this.getPageInfo()
							this.$message.success(res.data.message)
							this.addFormVisible = false
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 打开添加表单
				openAddForm() {
					// 清空数据
					this.addFrom = {}
					this.fileImgList = []
					// 打开表单
					this.addFormVisible = true
				},
				// 添加图片文件 改变时会调用
				handleChangeAddImg(file, fileList) {
					// 显示文件列表
					this.showImgFileList = true
					if (fileList.length > 0) {
						this.fileImgList = [fileList[fileList.length - 1]] // 显示最后一次选择的文件
					}
				},
				// 文件上传前调用 判断文件大小、类型
				beforeUploadAddImg(file) {
					// file.type image/jpeg image/png 
					// 对 file.type.slice(0, 5) image 进行截取，判断是否是图片
					const isImage = file.type.slice(0, 5) === 'image';
					const isLt30M = file.size / 1024 / 1024 < 30;
					if (!isImage) {
						this.$message.error('上传的文件不是图片!');
					}
					if (!isLt30M) {
						this.$message.error('上传图片大小不能超过 30MB!');
					}
					return isImage && isLt30M;
				},
				uploadAddImgSuccess(response, file, fileList) {
					console.log(response)
					if (response.code == 200) {
						this.$message.success(response.message);
					} else {
						this.$message.error(response.message);
					}
					//刷新列表数据，重新求情列表数据
					this.getPageInfo()
				},
				// 单个删除，根据歌手id,删除歌曲数据
				deleteById(id) {
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'delete',
						url: 'http://localhost:8080/user/delete/' + id,
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 打印后端返回的消息
							this.$message.success(res.data.message)
							//刷新列表数据，重新求情列表数据
							this.getPageInfo()
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 根据id，查询歌手并显示到修改表单中
				update(id) {
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'get',
						url: 'http://localhost:8080/user/selectOne/' + id,
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.updateFrom = res.data.data.user
							console.log(this.updateFrom)
							// 清空数据
							this.fileImgList = []
							// 打开修改表单
							this.updateFormVisible = true
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 修改歌曲
				updateSubmit(id) {
					console.log(id)
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'put',
						url: 'http://localhost:8080/user/update',
						headers: {
							'token': jwtToken
						},
						data: {
							id: this.updateFrom.id,
							nickName: this.updateFrom.nickName,
							password: this.updateFrom.password,
							phone: this.updateFrom.phone,
							remarks: this.updateFrom.remarks
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 上传表单 参数 歌曲id
							this.uploadData.userId = res.data.data.userId
							if (this.fileImgList.length != 0) {
								// 上传表单图片
								this.$refs.uploadImage.submit();
							}
							this.$message.success(res.data.message)
							//关闭修改表单
							this.updateFormVisible = false
							//刷新列表数据，重新求情列表数据
							this.getPageInfo()
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				//e事件源，谁发生了这件事
				allSelect(e) {
					this.ids = []
					// 设置全选状态
					this.isAllSelect = e.target.checked
					// 如果是选中状态,将所有的id到ids中
					if (this.isAllSelect) {
						//添加所有的id到ids中
						this.list.forEach(element => {
							this.ids.push(element.id)
						});
					}
					console.log(this.ids)
				},
				ckSelect(e) {
					let id = e.target._value
					if (e.target.checked) { //选中，把对应的id添加到ids数组
						this.ids.push(id)
					} else { // 未选中，查找ids有没有对应的id，如果有删除掉
						let delindex = this.ids.indexOf(id)
						if (delindex > -1) {
							this.ids.splice(delindex, 1)
						}
					}
					console.log(this.ids)
				},
				//批量删除
				deteleBatch() {
					console.log(this.ids)
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'delete',
						url: 'http://localhost:8080/user/deleteBatch',
						headers: {
							'token': jwtToken
						},
						data: this.ids
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 打印后端返回的消息
							this.$message.success(res.data.message)
							//刷新列表数据，重新求情列表数据
							this.getPageInfo()
							// 清空 ids 数组
							this.ids = []
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
			}
		})
	</script>
</html>
